import { useRef, useState } from 'react'
import { useSize, useRequest, useLatest } from 'ahooks'
import { useEffect } from 'react'
import { Select } from 'antd'
import { Area, Line } from '@ant-design/plots'
import { TestTypeMappingTwo, IndexToZH } from '../../../../Common/Configure/CommonParameter'
import { project } from '../../../../Common/Data'
import { NotTitleLargeScreenTablesModal } from './LargeScreenModal'

import { Http } from '../../../../Common/Api'
import dayjs from 'dayjs'
const { imageUrl } = project[window.location.hostname]

// 压浆 体积曲线
const GroutingModalVolumeCurve =
    '0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,15,20,25,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0'
// 压浆 内压
const GroutingModalPressureInCurve =
    '0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.02,0.03,0.05,0.01,0.04,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0'
// 压浆 外压
const GroutingModalPressureOutCurve =
    '0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.05,0.04,0.06,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0'

export const TensioningModal = ({ uuid }) => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    const [Nav, setNav] = useState()
    const [Active, setActive] = useState()
    const [ChartsOne, setChartsOne] = useState()
    const [ChartsTwo, setChartsTwo] = useState()
    const [Video] = useState('url')
    const [Data, setData] = useState([])
    useEffect(() => {
        if (size && Data.length !== 0) {
            const { width, height } = size
            const FD = [
                ...Data.find(v => v.tensioningSection === 'A')
                    .forceCurve.split(',')
                    .map((item, index) => ({ time: index, value: Number(item), title: 'A面' })),
                ...Data.find(v => v.tensioningSection === 'B')
                    .forceCurve.split(',')
                    .map((item, index) => ({ time: index, value: Number(item), title: 'B面' })),
            ]
            const ED = [
                ...Data.find(v => v.tensioningSection === 'A')
                    .elongationCurve.split(',')
                    .map((item, index) => ({ time: index, value: Number(item), title: 'A面' })),
                ...Data.find(v => v.tensioningSection === 'B')
                    .elongationCurve.split(',')
                    .map((item, index) => ({ time: index, value: Number(item), title: 'B面' })),
            ]
            const configOne = {
                data: FD,
                width: width / 2 - 50,
                height,
                appendPadding: 16,
                autoFit: false,
                padding: 'auto',
                xField: 'time',
                yField: 'value',
                seriesField: 'title',
                color: ['rgba(66, 186, 236, 1)', 'rgba(72, 230, 201, 1)'],
                xAxis: {
                    label: { style: { fill: '#B2FBFD' } },
                    line: { style: { stroke: '#B2FBFD' } },
                    tickLine: { style: { stroke: '#B2FBFD' } },
                    title: { text: '时间/s', position: 'end', offset: -20, style: { fill: '#3BACE9', fontSize: 12 } },
                },
                yAxis: {
                    tickCount: 5,
                    label: { style: { fill: '#B2FBFD' } },
                    grid: { line: { style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] } } },
                    title: {
                        text: '张拉力/Kn',
                        position: 'end',
                        offset: -20,
                        spacing: 10,
                        autoRotate: false,
                        style: { fill: '#3BACE9', fontSize: 12 },
                    },
                },
                legend: {
                    layout: 'horizontal',
                    position: 'top',
                    offsetX: -24,
                    itemName: { style: { fill: 'white', fontSize: 12 } },
                },
            }
            const configTwo = {
                data: ED,
                width: width / 2 - 50,
                height,
                appendPadding: 16,
                autoFit: false,
                padding: 'auto',
                xField: 'time',
                yField: 'value',
                seriesField: 'title',
                color: ['rgba(66, 186, 236, 1)', 'rgba(72, 230, 201, 1)'],
                xAxis: {
                    label: { style: { fill: '#B2FBFD' } },
                    line: { style: { stroke: '#B2FBFD' } },
                    tickLine: { style: { stroke: '#B2FBFD' } },
                    title: { text: '时间/s', position: 'end', offset: -20, style: { fill: '#3BACE9', fontSize: 12 } },
                },
                yAxis: {
                    tickCount: 5,
                    label: { style: { fill: '#B2FBFD' } },
                    grid: { line: { style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] } } },
                    title: {
                        text: '伸长量/mm',
                        position: 'end',
                        offset: -20,
                        spacing: 10,
                        autoRotate: false,
                        style: { fill: '#3BACE9', fontSize: 12 },
                    },
                },
                legend: {
                    layout: 'horizontal',
                    position: 'top',
                    offsetX: -24,
                    itemName: { style: { fill: 'white', fontSize: 12 } },
                },
            }
            setChartsOne(configOne)
            setChartsTwo(configTwo)
        }
    }, [size, Data])

    const { runAsync: getLabTensionSteelBeamNo } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            let data = {}
            res.forEach(({ steelBeamNo, uuid }) => {
                if (data[steelBeamNo]) data[steelBeamNo].list = [...data[steelBeamNo].list, uuid]
                else data = { ...data, [steelBeamNo]: { label: steelBeamNo, value: steelBeamNo, list: [uuid] } }
            })
            setActive(res[0].steelBeamNo)
            setNav(data)
        },
    })

    useEffect(() => {
        getLabTensionSteelBeamNo({ url: 'getLabTensionSteelBeamNo', path: [uuid] })
    }, [uuid, getLabTensionSteelBeamNo])

    const { runAsync: getLabTensionBatch } = useRequest(Http, { manual: true })
    useEffect(() => {
        if (Active)
            getLabTensionBatch({ url: 'getLabTensionBatch', data: { uuids: Nav[Active].list.toString() } }).then(res =>
                setData(res),
            )
    }, [Active, Nav, getLabTensionBatch])

    return (
        <div className="TensioningModal">
            {Active ? (
                <Select
                    defaultValue={Active}
                    options={(() => Nav && Object.values(Nav).map(item => item))()}
                    onChange={e => setActive(e)}
                />
            ) : (
                <div />
            )}
            <div ref={ChartsBox}>
                {ChartsOne && <Line {...ChartsOne} />}
                {ChartsTwo && <Line {...ChartsTwo} />}
            </div>
            <div />
            <div>
                <div>
                    {Data.map(item => (
                        <div key={item.uuid}>
                            <div>
                                <div>
                                    <div>张拉断面 ：</div>
                                    <div>
                                        {item.steelBeamNo} - {item.tensioningSection}面
                                    </div>
                                </div>
                                <div>
                                    <div>张拉时间 ：</div>
                                    <div>{item.tensioningDate}</div>
                                </div>
                            </div>
                            <div>
                                <div>
                                    <div>张拉力0 ：</div>
                                    <div>{item.tensioningForce0}</div>
                                </div>
                                <div>
                                    <div>张拉力1 ：</div>
                                    <div>{item.tensioningForce1}</div>
                                </div>
                                <div>
                                    <div>张拉力2 ：</div>
                                    <div>{item.tensioningForce2}</div>
                                </div>
                                <div>
                                    <div>张拉力3 ：</div>
                                    <div>{item.tensioningForce3}</div>
                                </div>
                                <div>
                                    <div>张拉力4 ：</div>
                                    <div>{item.tensioningForce4}</div>
                                </div>
                            </div>
                            <div>
                                <div>
                                    <div>伸长量0 ：</div>
                                    <div>{item.elongation0}</div>
                                </div>
                                <div>
                                    <div>伸长量1 ：</div>
                                    <div>{item.elongation1}</div>
                                </div>
                                <div>
                                    <div>伸长量2 ：</div>
                                    <div>{item.elongation2}</div>
                                </div>
                                <div>
                                    <div>伸长量3 ：</div>
                                    <div>{item.elongation3}</div>
                                </div>
                                <div>
                                    <div>伸长量4 ：</div>
                                    <div>{item.elongation4}</div>
                                </div>
                            </div>
                            <div>
                                <div>
                                    <div>油压0 ：</div>
                                    <div>{item.oilPressure0}</div>
                                </div>
                                <div>
                                    <div>油压1 ：</div>
                                    <div>{item.oilPressure1}</div>
                                </div>
                                <div>
                                    <div>油压2 ：</div>
                                    <div>{item.oilPressure2}</div>
                                </div>
                                <div>
                                    <div>油压3 ：</div>
                                    <div>{item.oilPressure3}</div>
                                </div>
                                <div>
                                    <div>油压4 ：</div>
                                    <div>{item.oilPressure4}</div>
                                </div>
                            </div>
                            <div>
                                <div>
                                    <div>设计张拉控制力 ：</div>
                                    <div>{item.theoreticalElongation}</div>
                                </div>
                                <div>
                                    <div>总抻长量 ：</div>
                                    <div>{item.totalElongation}</div>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
                <div>
                    {/* <div>切换</div> */}
                    <img src={imageUrl + '张拉压浆.png'} alt="" />
                </div>
            </div>
        </div>
    )
}

export const GroutingModal = ({ uuid }) => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    const [Data] = useState([
        [
            { uuid: '1', title: '当前梁', value: '鹤岗互通SMK428+797.94左幅2-3' },
            { uuid: '2', title: '压浆方向', value: '东向西' },
            { uuid: '3', title: '压浆时间', value: '2021-04-24 07:58:52' },
        ],
        [
            { uuid: '4', title: '配合比', value: '100:0:28' },
            { uuid: '5', title: '水胶比', value: '0.28' },
        ],
        [
            { uuid: '6', title: '搅拌时间', value: '120.0min' },
            { uuid: '7', title: '开始时间', value: '2021-04-24 07:58:52' },
            { uuid: '8', title: '结束时间', value: '2021-04-24 08-08:52' },
        ],
        [
            { uuid: '9', title: '进浆压力', value: '0.7' },
            { uuid: '10', title: '出浆压力', value: '0.7' },
        ],
        [
            { uuid: '11', title: '进浆量', value: '84.4L' },
            { uuid: '12', title: '理论浆量', value: '84.4L' },
        ],
    ])
    const [Video] = useState('url')
    const [ChartsOne, setChartsOne] = useState()
    const [ChartsTwo, setChartsTwo] = useState()
    useEffect(() => {
        if (size) {
            const { width, height } = size
            // 张拉 体积曲线 VolumeCurve
            const VolumeCurve = GroutingModalVolumeCurve.split(',').map((item, index) => ({
                time: index,
                value: Number(item),
            }))
            // 张拉 内压力  PressureInCurve
            const PressureInCurve = GroutingModalPressureInCurve.split(',').map((item, index) => ({
                time: index,
                value: Number(item),
                title: '内压',
            }))
            // 张拉 外压力 PressureOutCurve
            const PressureOutCurve = GroutingModalPressureOutCurve.split(',').map((item, index) => ({
                time: index,
                value: Number(item),
                title: '外压',
            }))
            const configOne = {
                data: VolumeCurve,
                width,
                height: height / 2 - 32,
                appendPadding: 16,
                autoFit: false,
                padding: 'auto',
                xField: 'time',
                yField: 'value',
                color: 'rgba(255, 203, 79, 1) ',
                areaStyle: { fill: 'l(90) 0:rgba(255, 203, 79, 0.6) 1:rgba(255, 203, 79, 0)' },
                xAxis: {
                    label: { style: { fill: '#B2FBFD' } },
                    line: { style: { stroke: '#B2FBFD' } },
                    tickLine: { style: { stroke: '#B2FBFD' } },
                    title: { text: '时间/s', position: 'end', offset: -20, style: { fill: '#3BACE9', fontSize: 12 } },
                },
                yAxis: {
                    tickCount: 5,
                    label: { style: { fill: '#B2FBFD' } },
                    grid: { line: { style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] } } },
                    title: {
                        text: '进浆/L',
                        position: 'end',
                        offset: -20,
                        spacing: 10,
                        autoRotate: false,
                        style: { fill: '#3BACE9', fontSize: 12 },
                    },
                },
            }
            const configTwo = {
                data: [...PressureInCurve, ...PressureOutCurve],
                width,
                height: height / 2 - 32,
                appendPadding: 16,
                autoFit: false,
                padding: 'auto',
                xField: 'time',
                yField: 'value',
                seriesField: 'title',
                color: ['rgba(66, 186, 236, 1)', 'rgba(72, 230, 201, 1)'],
                xAxis: {
                    label: { style: { fill: '#B2FBFD' } },
                    line: { style: { stroke: '#B2FBFD' } },
                    tickLine: { style: { stroke: '#B2FBFD' } },
                    title: { text: '时间/s', position: 'end', offset: -20, style: { fill: '#3BACE9', fontSize: 12 } },
                },
                yAxis: {
                    tickCount: 5,
                    label: { style: { fill: '#B2FBFD' } },
                    grid: { line: { style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] } } },
                    title: {
                        text: '压力/Kn',
                        position: 'end',
                        offset: -20,
                        spacing: 10,
                        autoRotate: false,
                        style: { fill: '#3BACE9', fontSize: 12 },
                    },
                },
                legend: {
                    layout: 'horizontal',
                    position: 'top',
                    offsetX: -24,
                    itemName: { style: { fill: 'white', fontSize: 12 } },
                },
            }
            setChartsOne(configOne)
            setChartsTwo(configTwo)
        }
    }, [size])

    return (
        <div className="GroutingModal">
            <div>
                <div>
                    {Data.map((item, index) => (
                        <div key={`TensioningModalDate${index}`}>
                            {item.map(({ uuid, title, value }) => (
                                <div key={uuid}>
                                    <div>{title} : </div>
                                    <div>{value}</div>
                                </div>
                            ))}
                        </div>
                    ))}
                </div>
                <div>
                    <img src={imageUrl + '张拉压浆.png'} alt="" />
                </div>
            </div>
            <div />
            <div ref={ChartsBox}>
                <div>
                    <div className="TitleSmall">
                        <div>进浆量曲线(L)</div>
                        <div />
                    </div>
                    <div>{ChartsOne && <Area {...ChartsOne} />}</div>
                </div>
                <div>
                    <div className="TitleSmall">
                        <div>进浆压力曲线 (Kn)</div>
                        <div />
                    </div>
                    <div>{ChartsTwo && <Area {...ChartsTwo} />}</div>
                </div>
            </div>
        </div>
    )
}

export const JSZXOutline = ({ other }) => {
    const { SixTitle, SixContent } = other
    return (
        <div className="JSZXOutline">
            <div className="Title">{SixTitle}</div>
            <div className="Content" dangerouslySetInnerHTML={{ __html: SixContent }} />
        </div>
    )
}

export const JSZXIframe = ({ other }) => {
    const { iframeUrl } = other
    return (
        <iframe
            title="Video"
            width="100%"
            height="80vh"
            scrolling="no"
            frameBorder="0"
            allowFullScreen={true}
            src={iframeUrl}
        />
    )
}

export const TestDetailed = ({ other, ExperimentalThrEvent, Off }) => {
    const [classification, setClassification] = useState('LabStressMachineMapping')
    const [ListArr, setListArr] = useState([])
    const [Status, setStatus] = useState()
    const StatusLatest = useLatest(Status)

    useEffect(() => {
        const { result, LabList } = other
        if (LabList.length !== 0) {
            setStatus(result || 0)
            if (result === 1) {
                const data = LabList.filter(v => v.nonQualifiedCount !== 0)
                const [{ type }] = data
                setClassification(TestTypeMappingTwo[type])
                setListArr(data)
            } else {
                const [{ type }] = LabList
                setClassification(TestTypeMappingTwo[type])
                setListArr(LabList)
            }
        } else {
            Off()
        }
    }, [Off, other])

    return (
        <div className={`${other.className} TwoModal`}>
            <div>
                {ListArr.map(({ type, nonQualifiedCount }, index) => (
                    <div
                        key={index}
                        className={TestTypeMappingTwo[type] === classification ? 'active' : ''}
                        onClick={() => setClassification(TestTypeMappingTwo[type])}
                    >
                        {type} {Status === 1 ? nonQualifiedCount + '组' : ''}
                    </div>
                ))}
            </div>
            {(StatusLatest.current || StatusLatest.current === 0) && (
                <div>
                    <NotTitleLargeScreenTablesModal
                        className="ItemTitle"
                        parameter={{
                            two: 'notTitle',
                            type: 'LargeScreeTable',
                            classification,
                            other: { ...other, result: Status === 1 ? 1 : 0 },
                        }}
                        ExperimentalThrEvent={ExperimentalThrEvent}
                    />
                </div>
            )}
        </div>
    )
}

export const BadaPaymentFinalSummaryList = ({ uuid, other }) => {
    const { runAsync } = useRequest(Http, { manual: true })
    const [Title, setTitle] = useState({ title: '工程名称', date: '日期', unit: '万元' })
    const [Th] = useState([
        { uuid: '1', title: '序号', flex: 114 },
        { uuid: '2', title: '项目名称', flex: 240 },
        { uuid: '3', title: '金额', flex: 240 },
        { uuid: '4', title: '备注', flex: 240 },
    ])

    const [List, setList] = useState([])
    useEffect(() => {
        const arrList = {
            Building: { url: 'getProjectBuildingPaymentFinalSummaryList' },
            Operation: { url: 'getProjectOperationPaymentFinalSummaryList' },
        }
        const { type } = other
        const { url } = arrList[type]
        runAsync({ url, data: { organizationUuid: uuid } }).then(res => {
            const { projectCompany, resultList } = res
            setList(resultList)
            setTitle({ title: projectCompany.projectName, date: dayjs().format('YYYY-MM-DD'), unit: '万元' })
        })
    }, [other, runAsync, uuid])

    return (
        <div className="BadaPaymentFinalSummaryList">
            <div className="Box">
                <div className="Table">
                    <div className="Title">
                        <div>
                            <div>工程名称 : </div>
                            <div>{Title.title}</div>
                        </div>
                        <div>
                            <div style={{ marginRight: 16 }}>
                                <div>日期 : </div>
                                <div>{Title.date}</div>
                            </div>
                            <div>
                                <div>单位 : </div>
                                <div>{Title.unit}</div>
                            </div>
                        </div>
                    </div>
                    <div className="Th">
                        {Th.map(({ uuid, title, flex }) => (
                            <div key={uuid} style={{ flex }}>
                                {title}
                            </div>
                        ))}
                    </div>
                    <div className="Td">
                        {List.map((item, index) => (
                            <div className="List" key={index}>
                                <div style={{ flex: Th[0].flex }}>{IndexToZH[index]}</div>
                                {[...new Array(3).keys()].map((_, key) => (
                                    <div key={key} style={{ flex: Th[key + 1].flex }}>
                                        {(() => {
                                            switch (key) {
                                                case 0:
                                                    return <div style={{ color: 'white' }}>{item.name}</div>
                                                case 1:
                                                    return <div style={{ color: 'white' }}>{item.amount}</div>
                                                default:
                                                    return <div>-</div>
                                            }
                                        })()}
                                        {item.children.map(({ uuid, name, amount }, num) => (
                                            <div key={uuid}>
                                                {(() => {
                                                    switch (key) {
                                                        case 0:
                                                            return `(${IndexToZH[num]}) ${name}`
                                                        case 1:
                                                            return amount
                                                        default:
                                                            return '-'
                                                    }
                                                })()}
                                            </div>
                                        ))}
                                    </div>
                                ))}
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </div>
    )
}
